<!-- 围栏属性 -->
<template>
  <a-form-item label="纹理贴图">
    <a-select
      v-model:value="selectMapComponent.layerStyle.texture"
      class="inputStyle"
      :getPopupContainer="(triggerNode) => triggerNode.parentNode"
      :options="fenceTextureOptions"
    />
  </a-form-item>
  <a-form-item label="围栏高度">
    <a-input-number
      class="inputStyle"
      :min="10"
      v-model:value="selectMapComponent.layerStyle.height"
    />
  </a-form-item>
  <template v-if="!selectMapComponent.layerStyle.texture">
    <a-form-item label="顶部颜色">
      <a-input
        class="inputStyle"
        v-if="isFullscreen"
        type="color"
        v-model:value="selectMapComponent.layerStyle.topColor"
      />
      <color-picker
        v-else
        v-model:pureColor="selectMapComponent.layerStyle.topColor"
      />
    </a-form-item>
    <a-form-item label="底部颜色">
      <a-input
        class="inputStyle"
        v-if="isFullscreen"
        type="color"
        v-model:value="selectMapComponent.layerStyle.bottomColor"
      />
      <color-picker
        v-else
        v-model:pureColor="selectMapComponent.layerStyle.bottomColor"
      />
    </a-form-item>
    <a-form-item label="侧顶颜色">
      <a-input
        class="inputStyle"
        v-if="isFullscreen"
        type="color"
        v-model:value="selectMapComponent.layerStyle.sideTopColor"
      />
      <color-picker
        v-else
        v-model:pureColor="selectMapComponent.layerStyle.sideTopColor"
      />
    </a-form-item>
    <a-form-item label="侧底颜色">
      <a-input
        class="inputStyle"
        v-if="isFullscreen"
        type="color"
        v-model:value="selectMapComponent.layerStyle.sideBottomColor"
      />
      <color-picker
        v-else
        v-model:pureColor="selectMapComponent.layerStyle.sideBottomColor"
      />
    </a-form-item>
  </template>
  <template v-else>
    <a-form-item label="纹理宽度">
      <a-input-number
        class="inputStyle"
        :min="20"
        v-model:value="selectMapComponent.layerStyle.textureSize[0]"
      />
    </a-form-item>
    <a-form-item label="纹理高度">
      <a-input-number
        class="inputStyle"
        :min="20"
        v-model:value="selectMapComponent.layerStyle.textureSize[1]"
      />
    </a-form-item>
  </template>
  <a-form-item label="海拔高度">
    <a-input-number
      class="inputStyle"
      :min="0"
      v-model:value="selectMapComponent.layerStyle.altitude"
    />
  </a-form-item>
  <!--面图层配置-->
  <a-collapse v-model:activeKey="activePolygonKey">
    <a-collapse-panel key="polygonAttr" header="建筑物属性">
      <a-form-item label="状态">
        <a-radio-group
          v-model:value="
            selectMapComponent.areaBuildings.styleOpts.areas[
              selectMapComponent.buildingIndex
            ].visible
          "
        >
          <a-radio :value="true">显示</a-radio>
          <a-radio :value="false">隐藏</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="层级">
        <a-input-number
          class="inputStyle"
          :min="12"
          v-model:value="selectMapComponent.areaBuildings.zIndex"
        />
      </a-form-item>
      <a-form-item label="透明度">
        <a-input-number
          class="inputStyle"
          :min="0.1"
          :max="1"
          :step="0.1"
          v-model:value="selectMapComponent.areaBuildings.opacity"
        />
      </a-form-item>
      <a-form-item label="外建筑">
        <a-radio-group
          v-model:value="
            selectMapComponent.areaBuildings.styleOpts.hideWithoutStyle
          "
        >
          <a-radio :value="false">显示</a-radio>
          <a-radio :value="true">隐藏</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="自定义纹理">
        <a-radio-group
          v-model:value="
            selectMapComponent.areaBuildings.styleOpts.areas[
              selectMapComponent.buildingIndex
            ].rejectTexture
          "
        >
          <a-radio :value="true">显示</a-radio>
          <a-radio :value="false">隐藏</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="顶面颜色">
        <a-input
          class="inputStyle"
          v-if="isFullscreen"
          type="color"
          v-model:value="
            selectMapComponent.areaBuildings.styleOpts.areas[
              selectMapComponent.buildingIndex
            ].color1
          "
        />
        <color-picker
          v-else
          v-model:pureColor="
            selectMapComponent.areaBuildings.styleOpts.areas[
              selectMapComponent.buildingIndex
            ].color1
          "
        />
      </a-form-item>
      <a-form-item label="侧面颜色">
        <a-input
          class="inputStyle"
          v-if="isFullscreen"
          type="color"
          v-model:value="
            selectMapComponent.areaBuildings.styleOpts.areas[
              selectMapComponent.buildingIndex
            ].color2
          "
        />
        <color-picker
          v-else
          v-model:pureColor="
            selectMapComponent.areaBuildings.styleOpts.areas[
              selectMapComponent.buildingIndex
            ].color2
          "
        />
      </a-form-item>
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
export default {
  props: ['selectMapComponent'],
  inject: ['getScreenStatus'],
  computed: {
    isFullscreen() {
      return this.getScreenStatus();
    },
  },
  data() {
    return {
      fenceTextureOptions: [
        {
          value: null,
          label: '无',
        },
        {
          value:
            'https://img1.baidu.com/it/u=54624005,4064877002&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
          label: '科幻风',
        },
      ],
      activePolygonKey: 'polygonAttr',
    };
  },
};
</script>
<style lang="less" scoped>
.inputStyle {
  width: 160px;
}
/deep/ .vc-color-wrap {
  width: 160px;
}
</style>
